<template>
  <div>
    <el-card style="position: relative; min-width: 1200px; overflow: inherit">
      <el-form
        ref="workOrdereForm"
        :model="commandForm"
        label-width="90px"
        label-position="left"
      >
        <el-row>
          <el-col :span="7" style="display: flex">
            <el-form-item prop="date" label="选择时间">
              <el-date-picker
                v-model="commandForm.date"
                style="width: 100%; border-radius: 0px; margin-top: 1px"
                type="datetimerange"
                start-placeholder="开始时间"
                :default-time="['00:00:00', '23:59:59']"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="工单类型" prop="workOrderType">
              <el-select
                v-model="commandForm.orderTypeId"
                style="width: 100%"
                placeholder="请选择工单类型"
                clearable
              >
                <el-option
                  v-for="item of workOrderTypeList"
                  :key="item.id"
                  :label="item.workOrderName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="工单状态" prop="workOrderStatus">
              <el-select
                v-model="commandForm.status"
                style="width: 100%"
                placeholder="请选择工单类型"
                clearable
              >
                <el-option
                  v-for="item of workOrderStatusList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7" style="min-width: 170px">
            <el-button class="width120" @click="this.resetFields1"
              >重置</el-button
            >
            <el-button type="primary" class="width120" @click="()=>{
               this.dataForm=JSON.parse(JSON.stringify(this.commandForm));
               this.handleQuery()
              }"
              >查询</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px; min-width: 1200px">
      <div class="switch">
        <div>
          <el-switch v-model="isFixedTableH" inactive-text="固定表头">
          </el-switch>
        </div>
      </div>
      <el-table :data="dataList" :height="fixedTableHeight">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="delayConfirmInnerNo"
          align="center"
          label="工单流水号"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.innerPayformNo ? scope.row.innerPayformNo : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="orderType"
          align="center"
          label="工单类型"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.orderTypeName ? scope.row.orderTypeName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="subject"
          align="center"
          label="工单分类"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.orderTypeDetailName
                  ? scope.row.orderTypeDetailName
                  : "-"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status"
          align="center"
          label="工单状态"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
              :style="{
                color:
                  scope.row.status == 'pend_process' ||
                  scope.row.status == 'processing' ||
                  scope.row.status == 'pend_confirm'
                    ? '#F69C1F'
                    : '#07A555',
              }"
            >
              {{ scope.row.statusName ? scope.row.statusName : "-" }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="act" width="200" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetails(scope.row)"
              >详情</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.status == 'pend_confirm'"
              @click="confirmFn(true, scope.row.id)"
              >确认</el-button
            >
            <el-button
              type="text"
              v-if="scope.row.status == 'pend_confirm'"
              style="color: #f56c6c"
              @click="confirmFn(false, scope.row.id)"
              >重新激活</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>
    <!-- 详情抽屉 -->
    <detail-drawer
      :drawer.sync="drawer"
      :info="detailsInfo"
      :activeKey="activeKey"
      @resetFields="resetFields"
    ></detail-drawer>
  </div>
</template>

<script>
import detailDrawer from "./detailDrawer.vue";
import {  getTabIndex } from "@/utils/public";
import mixin from "@/mixins/mixin";
export default {
  mixins: [mixin],
  name: "workOrder",
  components: {
    detailDrawer,
  },
  data() {
    return {
      activeKey: getTabIndex(),
      mixinViewModuleOptions: {
        getDataListURL: "/api/workOrderInfo/searchByPage",
        createdIsNeed:false,
      },
      detailsInfo: {},
      drawer: false,
      dataList: [],
      commandForm: {
        date: [
          this.$moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
          this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
        ],
        gmtCreatedBegin: this.$moment()
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        gmtCreatedEnd: this.$moment()
          .endOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        status: "",
        orderTypeId: "",
        // payformChannel: "",
        // workOrderType: "",
        // receiverType: "",
        // memberNo: "",
        // payformChannel: "wechat",
      },
      form: {},
      settleList: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "分账", value: "no_settle" },
        { id: 3, label: "多次分账", value: "actual_settle" },
        { id: 4, label: "完结分账", value: "delay_settle" },
      ],
      workOrderTypeList: [
        // { id: 1, label: "业务咨询", value: "1" },
        // { id: 2, label: "技术咨询", value: "2" },
        // { id: 3, label: "订单问题", value: "3" },
        // { id: 4, label: "其他", value: "4" },
      ],
      workOrderStatusList: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "待处理", value: "pend_process" },
        { id: 3, label: "处理中", value: "processing" },
        { id: 4, label: "已处理", value: "pend_confirm" },
        { id: 5, label: "已完成", value: "confirmed" },
      ],
      refundCaseList: [
        { id: 1, label: "所有", value: "" },
        { id: 2, label: "商户号", value: "MERCHANT_ID" },
        { id: 3, label: "个人OpenID", value: "PERSONAL_OPENID" },
      ],
      payChannel: this.$store.state.channelList,
      payChannelType: this.$store.state.channelListType,
      payChannelTypeList: [],
    };
  },
  created() {
    this.dataForm=JSON.parse(JSON.stringify(this.commandForm))
    this.handleQuery()
    this.getTypeList();
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.handleQuery();
        }
      },
    },
    deep: true,
  },
  methods: {
    getTabIndex,
    confirmFn(command, id) {
      let params = {
        id,
        confirm: command,
      };
      this.$http.post("/api/workOrderInfo/confirm", params).then((res) => {
        if (res.code === "0000") {
          command
            ? this.$message.success("确认成功！")
            : this.$message.success("激活成功！");
          this.resetFields();
        }
      });
    },
    getTypeList() {
      this.$http.get("/api/workOrderInfo/getOrderTypeList").then((res) => {
        if (res.code === "0000") {
          let list = [{ workOrderName: "所有", id: "" }, ...res.data];
          this.workOrderTypeList = list;
        }
      });
    },
    resetFields() {
      // this.commandForm = {
      //   date: [
      //     this.$moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
      //     this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
      //   ],
      //   gmtCreatedBegin: this.$moment()
      //     .startOf("day")
      //     .format("YYYY-MM-DD HH:mm:ss"),
      //   gmtCreatedEnd: this.$moment()
      //     .endOf("day")
      //     .format("YYYY-MM-DD HH:mm:ss"),
      //   status: "",
      //   orderTypeId: "",
      // };
      this.handleQuery();
    },
    resetFields1() {
      this.commandForm = {
        date: [
          this.$moment().startOf("day").format("YYYY-MM-DD HH:mm:ss"),
          this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
        ],
        gmtCreatedBegin: this.$moment()
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        gmtCreatedEnd: this.$moment()
          .endOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        status: "",
        orderTypeId: "",
      };
    },
    handleDetails(row) {
      this.$http.get(`/api/workOrderInfo/getById?id=${row.id}`).then((res) => {
        if (res.code === "0000") {
          this.detailsInfo = res.data;
          this.drawer = true;
        }
      });
      // this.detailsInfo = {};
      // this.drawer = true;
    },
    setRefundStatus(val) {
      let str = "";
      let color = "";
      switch (val) {
        case "0":
          str = "未结算";
          color = "pedding";
          break;
        case "1":
          str = "结算成功";
          color = "succeed";
          break;
        case "2":
          str = "处理中";
          color = "pedding";
          break;
        case "3":
          str = "结算失败";
          color = "failed";
          break;
        // case "5":
        //   str = "已关闭";
        //   color = "failed";
        //   break;
      }
      return {
        str,
        color,
      };
    },
    handleQuery() {
      this.dataForm.gmtCreatedBegin = undefined;
      this.dataForm.gmtCreatedEnd = undefined;
      if (this.dataForm.date && this.dataForm.date.length) {
        this.dataForm.gmtCreatedBegin = this.dataForm.date[0];
        this.dataForm.gmtCreatedEnd = this.dataForm.date[1];
      }
      // this.mixinViewModuleOptions.getDataListURL =
      //   "/api/orderSettle/listOrderSettleByPage";
      // this.dataForm.busType = "1";
      // this.dataForm.payformChannel = "wechat";
      // this.dataForm.status = "";
      this.getDataList();
      // this.dataList = [
      //   {
      //     gmtCreated: "2023-03-13 14:00",
      //     payformNo: "87930235949282",
      //     orderType: "1",
      //     orderType1: "1",
      //     status: "failed",
      //     channelPayFormTypeName: "4",
      //   },
      // ];
    },
    setPayStatus(val) {
      let str = "";
      switch (val) {
        case "pend_process":
          str = "待处理";
          break;
        case "processing":
          str = "处理中";
          break;
        case "pend_confirm":
          str = "待确认";
          break;
        case "confirmed":
          str = "已处理";
          break;
      }
      return str;
    },
    subjectState(val) {
      let str = "";
      switch (val) {
        case "1":
          str = "业务咨询";
          break;
        case "2":
          str = "技术咨询";
          break;
        case "3":
          str = "订单问题";
          break;
      }
      return str;
    },
    subjectState1(val) {
      let str = "";
      switch (val) {
        case "1":
          str = "关于云尘付";
          break;
        case "2":
          str = "SDK导入/编辑";
          break;
        case "3":
          str = "订单争议问题";
          break;
      }
      return str;
    },
    handleChannel(val) {
      if (val) {
        this.payChannelTypeList = this.payChannelType[val];
      } else {
        this.payChannelTypeList = [];
      }
      this.commandForm.workOrderType = "";
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  color: #4f595f;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  margin-left: 10px;
}
.textBox {
  display: flex;
  .label {
    color: #869daa;
    font-size: 14px;
    width: 120px;
    margin-left: 10px;
    text-align: right;
  }
  .val {
    font-size: 14px;
    margin-left: 20px;
    color: #869daa;
    width: 700px;
  }
}
.pedding {
  color: #f69c1f;
}
.succeed {
  color: #07a555;
}
.failed {
  color: #f42b2b;
}
.switch {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.search {
  position: absolute;
  right: 0;
  top: -164px;
}
.ml {
  margin-left: 20px;
}
:deep(.leftSelect) {
  .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
}
</style>
